import * as React from 'react'
import { cn } from '@/lib/utils'

export interface InputProps
  extends React.InputHTMLAttributes<HTMLInputElement> {
  // 是否使用主题边框颜色
  themeBorder?: boolean;
}

const Input = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, type, themeBorder = false, ...props }, ref) => {
    return (
      <input
        type={type}
        className={cn(
          // 基础样式
          "flex h-10 w-full rounded-md border border-gray-200 bg-white px-3 py-2 text-sm",
          "file:border-0 file:bg-transparent file:text-sm file:font-medium",
          "placeholder:text-gray-500",
          // 禁用状态
          "disabled:cursor-not-allowed disabled:opacity-50",
          // 主题色样式
          {
            // 普通边框
            "border-gray-200": !themeBorder,
            // 主题色边框
            "border-[var(--primary-border)]": themeBorder,
            // 聚焦状态应用主题色
            "focus:border-[var(--input-focus-border)] focus:outline-none focus:ring-2 focus:ring-[var(--input-focus-shadow)]": true
          },
          className
        )}
        ref={ref}
        {...props}
      />
    )
  }
)
Input.displayName = "Input"

export { Input } 